<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>aa1</li>
        <li>aa2</li>
        <li>aa3</li>
      </ul>
    </div>
    <div class="box2" title="box2"><span>box2</span></div>
    <p class="p">ppppppp</p>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.创建DOM节点
    //$(dom节点内容)
    var dom = $("<p><span>这是新创建的节点</span></p>");
    console.log(dom);
    //b.在内部添加DOM节点
    //append()   在最后添加
    $(".box").append(dom);
    //appendTo()
    $(dom).appendTo($(".box"));
    //prepend()
    $(".box").prepend(dom);
    //prependTo()
    $(dom).prependTo($(".box"));
    //c.在外部添加DOM节点
    //before()
    $(".box").before($("<strong>strong</strong>"));
    //insertBefore()
    $("<strong>strong</strong>").insertBefore($(".box"));
    //after()
    $(".box").after($("<strong>strong</strong>"));
    //insertAfter()
    $("<strong>strong</strong>").insertAfter($(".box"));
    //d.复制DOM节点
    //clone()
    $(".p").click(function () {
      alert(1111);
    });
    $(".box").append($(".p").clone());
    //clone(true)
    $(".box").append($(".p").clone("true"));
    //e.删除DOM节点
    //remove()
    $(".p").remove();
    //remove(dom节点)
    $(".box2").remove('[title]')
    //empty()
    $(".box").empty()
  </script>
</html>
